<template>
	<view class="card-container" :style="{'margin':margin,'border-radius':br }">
		<view v-if="title" class="card-head flex-x-between-center">
			<div class="flex-x-start-center">
				<view class="line"></view>
				<text >{{ title }}</text>
			</div>
			<slot name="headRight"></slot>
		</view>
		<!-- 卡片内容 -->
		<view :style="{padding:padding}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"HCard",
		props: {
			title: {
				type: String,
				default: ''
			},
			padding: {
				type: String,
				default: '10px'
			},
			margin: {
				type: String,
				default: '0rpx'
			},
			br: {
				type: String,
				default: '12rpx'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
.card-container {
	overflow: hidden;
	background-color: #FFFFFF;
	/*box-shadow: 0px 2px 10px 0px rgba(16, 17, 19, 0.06);*/
	.card-head {
		height: 66rpx;
		padding: 16rpx 26rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 66rpx;
		border: 0 solid #000;
		.line {
			width: 10rpx;
			height: 40rpx;
			background: #2C87F8;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
